// 注意 ，layout 默认是 server component ， 不需要写 user client
import { Children } from "react";
import "./globals.css";

// 辅助主键， 导航栏
function NavBar() {
  return (
    <nav
      style={{
        backgroundColor: "#333",
        padding: "15px",
        color: "white",
        display: "flex",
        gap: "20px",
      }}
    >
      <a href="/" style={{ color: "white", textDecoration: "none" }}>
        主页
      </a>
      <a href="/about" style={{ color: "white", textDecoration: "none" }}>
        关于
      </a>
      <a href="/users/1" style={{ color: "white", textDecoration: "none" }}>
        用户 1
      </a>
    </nav>
  );
}

// 核心 layout 组件
export default function RootLayout({
  children, // children 代表所有 page.tsx 或 nested layouts
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {/* 共享导航栏 */}
        <NavBar />
        <main style={{ padding: "20px" }}>
          {children}
          {/* 这里会渲染当前路由对应的 page.tsx 的内容 */}
        </main>
      </body>
    </html>
  );
}
